<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/index.css?v=1">
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="script.js" defer></script>
  <title>北大青鸟校区管理平台</title>
  <style>
    li {
      cursor: pointer;
    }
    body{
      overflow-x: hidden;
    }
  </style>
</head>
<body>
<div class="top">
  <div class="div">
    <div><img src="img/index/favicon.ico">北大青鸟校区管理平台</div>
    <div><a href="#" onclick="showPage('WelcomeServlet','欢迎页')"><img src="img/index/homepage.png" alt="欢迎页">欢迎页</a></div>
    <div><a href=""><img src="img/index/class_workbench.png" alt="班级工作台">班级工作台</a></div>
  </div>
  <div class="div">
    <div class="color">欢迎您[ 株洲科泰： ${teacher.tname}]</div>
    <div><a href="#" style="color: red;">未读公告:1 条 </a></div>
    <div class="color" id="current-date"></div>
    <div><a href="LogoutServlet">退出系统</a></div>
  </div>
</div>
<section class="">
  <div class="height" id="height">
    <div class="img">
      <div>--系统导航栏--</div>
      <div class="double-left" id="left-toggle">
        <svg t="1702004532127" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="5951" width="18" height="18">
          <path
                  d="M272.9 512l265.4-339.1c4.1-5.2 0.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3c-9.1 11.6-9.1 27.9 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512z"
                  p-id="5952"></path>
          <path
                  d="M576.9 512l265.4-339.1c4.1-5.2 0.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3c-9.1 11.6-9.1 27.9 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z"
                  p-id="5953"></path>
        </svg>
      </div>
    </div>
    <div class="flex">
      <div class="ty">通用功能</div>
      <div class="cp">产品功能</div>
    </div>
    <div id="hiddenContent">
      <button class="dropdown-btn">系统公告</button>
      <div class="dropdown-content" id="dropdownContent1">
        <a href="#" onclick="showPage('WelcomeServlet','欢迎页')">查看公告</a>
        <a href="#">公告管理</a>
        <a href="#">平台更新</a>
      </div>
      <button class="dropdown-btn">员工技能矩阵</button>
      <div class="dropdown-content" id="dropdownContent2">
        <a href="#">师资入口自测</a>
      </div>
      <button class="dropdown-btn">系统报表</button>
      <div class="dropdown-content" id="dropdownContent3">
        <a href="#">私有题库贡献统计</a>
      </div>
      <button class="dropdown-btn">总部下发资料</button>
      <div class="dropdown-content" id="dropdownContent4">
        <a href="#">日常运营资料</a>
      </div>
      <button class="dropdown-btn">个人信息</button>
      <div class="dropdown-content" id="dropdownContent5">
        <a href="#">修改密码</a>
      </div>
    </div>

    <div id="cpContent" style="display: none;">
      <div style="width: 200px; background-color: antiquewhite;">
        <div class="father">
          <div class="toggle-text">BCSP2021S2课程</div>
          <svg id="svg" t="1706529790829" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="4482" width="16" height="16">
            <path
                    d="M183.168 332.501333a42.666667 42.666667 0 0 1 57.621333-2.496l2.709334 2.496L512 600.96l268.501333-268.48a42.666667 42.666667 0 0 1 57.621334-2.496l2.709333 2.496a42.666667 42.666667 0 0 1 2.496 57.621333l-2.496 2.709334-298.666667 298.666666a42.666667 42.666667 0 0 1-57.621333 2.496l-2.709333-2.496-298.666667-298.666666a42.666667 42.666667 0 0 1 0-60.330667z"
                    fill="#000000" p-id="4483"></path>
          </svg>
        </div>
        <div class="yincang hide">
          <ul>
            <li class="toggle-arrow" onclick="toggleChildContent(this, event)">请选择产品
            </li>
            <ul>
              <c:forEach var="curriculum" items="${list}">
                <li class="toggle-arrow" onclick="toggleChildContent(this, event)">
                    ${curriculum.pname}
                </li>
                <ul>
                  <c:forEach var="curriculum1" items="${curriculum.children}">
                    <li>---${curriculum1.pname}</li>
                  </c:forEach>
                </ul>
              </c:forEach>
            </ul>
          </ul>
        </div>
      </div>
      <button class="dropdown-btn">班级管理</button>
      <div class="dropdown-content" id="dropdownContent6">
        <a href="#">班级管理</a>
        <a href="#">学员管理</a>
      </div>
      <button class="dropdown-btn">学习计划</button>
      <div class="dropdown-content" id="dropdownContent7">
        <a href="#">学习计划设置</a>
        <a href="#">学习计划跟踪</a>
      </div>
      <button class="dropdown-btn">学习管理</button>
      <div class="dropdown-content" id="dropdownContent8">
        <a href="#">在线时间查询</a>
        <a href="#">学习进度查询</a>
        <a href="#">在线学习统计</a>
        <a href="#">考试成绩查询</a>
        <a href="#">学员答疑处理</a>
      </div>
      <button class="dropdown-btn">内部学习</button>
      <div class="dropdown-content" id="dropdownContent9">
        <a href="#">在线时间查询</a>
        <a href="#">学习进度查询</a>
      </div>
      <button class="dropdown-btn">评测与考试</button>
      <div class="dropdown-content" id="dropdownContent10">
        <a href="#">学员自测统计</a>
        <a href="#" onclick="showPage('PagerServlet','定制试卷')">定制试卷</a>
        <a href="#" onclick="showPage('ExamServlet','定制测试')">定制测试</a>
        <a href="#">私有题库</a>
      </div>
      <button class="dropdown-btn">资料管理</button>
      <div class="dropdown-content" id="dropdownContent11">
        <a href="#">产品资料管理</a>
      </div>
    </div>
  </div>
  <div class="position" id="position">
    <div class="double-right" id="right-toggle"><svg t="1702014037497" class="icon" viewBox="0 0 1024 1024"
                                                     version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1515" width="18" height="18">
      <path
              d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1c-4.1 5.2-0.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
              p-id="1516"></path>
      <path
              d="M837.2 492.3L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1c-4.1 5.2-0.4 12.9 6.3 12.9h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
              p-id="1517"></path>
    </svg></div>
  </div>
  <div class="iframe">
    <div id="contentArea" class="iframe-content">
      <div id="pageContent">欢迎页</div>
    </div>
    <iframe id="myFrame" src="Welcome.jsp" class="iframe-container">

    </iframe>
  </div>
  </div>
</section>
<footer>
  <div class="bottom">欢迎您提出宝贵建议，请发送邮件至反馈邮箱 <a class="qn" href="#">YL003@bdqn.cn</a>，我们有专人负责处理。</div>
</footer>
<script src="js/xia.js"></script>
<script>
  function toggleChildContent(element, event) {
    event.stopPropagation();
    var arrowElement = element.querySelector('.arrow');
    toggleArrow(arrowElement);
    var childUL = element.nextElementSibling;
    childUL.classList.toggle('hide');
  }

  function toggleArrow(arrowElement) {
    arrowElement.classList.toggle('arrow-down');
  }
  // 获取需要操作的元素
  var toggleText = document.querySelector('.toggle-text');
  var liElements = document.querySelectorAll('.yincang li');

  // 为每个 li 元素添加点击事件处理程序
  liElements.forEach(function(li) {
    li.addEventListener('click', function() {
      toggleText.textContent = li.textContent; // 将 li 的内容设置为 toggleText 的文本内容
      localStorage.setItem('selectedItem', li.textContent); // 使用 localStorage 保存选中的内容
    });
  });

  // 在页面加载时检查是否存在存储的数据，如果存在则更新 toggleText 的内容
  document.addEventListener('DOMContentLoaded', function() {
    var selectedItem = localStorage.getItem('selectedItem');
    if (selectedItem) {
      toggleText.textContent = selectedItem;
    }
  });


  $(document).ready(function() {
    $(".father").click(function() {
      $(".yincang").toggleClass("hide show"); // 切换显示与隐藏的类名
    });
  });

  document.addEventListener("DOMContentLoaded", function() {
    document.addEventListener("click", function(event) {
      var target = event.target;
      if (target.classList.contains("toggle-arrow")) {
        var ul = target.querySelector("ul");
        if (ul) {
          ul.style.display = ul.style.display === "none" ? "block" : "none";
          target.classList.toggle("arrow-down");
          target.classList.toggle("arrow-right");
        } else {
          var parentUl = target.closest("ul");
          if (parentUl) {
            var prevToggleArrow = parentUl.previousElementSibling;
            prevToggleArrow.classList.toggle("arrow-down");
            prevToggleArrow.classList.toggle("arrow-right");
          }
        }
        event.stopPropagation();
      }
    });
  });
</script>
<script>
  function showPage(pageName, pageDesc){
    // 获取要改变内容的元素
    var pageContent = document.getElementById('pageContent');
    // 改变该元素的文字内容
    pageContent.textContent = pageDesc;

    // 获取iframe元素
    var myFrame = document.getElementById('myFrame');
    // 改变iframe的src属性
    myFrame.src = pageName;
  }
</script>
</body>
</html>
